<template>
  <div>
    <el-dialog
      :title="id?'编辑工作模式':'添加工作模式'"
      :visible="visible"
      width="45%"
      @close="close"
    >

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-if="type!=2" label="礼拜制" name="first">

          <el-form :model="sortForm">

            <el-form-item label="工作模式名称：" style="margin-top: 35px;">
              <el-row type="flex">
                <el-input v-model="sortForm.name" placeholder="请填写广州模式名称" />
              </el-row>
            </el-form-item>

            <el-form-item label="连续工作天数：" style="margin-top: 35px;">
              <el-checkbox-group
                v-model="checkedCities"
                :min="1"
                :max="2"
              >
                <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="工作时间:">
              <el-row type="flex"> <el-time-picker
                v-model="time"
                style="width: 100%;margin-left: 40px;"
                is-range
                align="right"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                :default-value="['09:00:00','18:00:00']"
              /> </el-row>

            </el-form-item>
          </el-form>

        </el-tab-pane>
        <el-tab-pane v-if="type!=1" label="连续制" name="second">

          <el-form :model="sortForm">
            <el-form-item label="工作模式名称：" style="margin-top: 35px;">
              <el-row type="flex">
                <el-input v-model="sortForm.name" placeholder="请填写广州模式名称" />
              </el-row>
            </el-form-item>

            <el-form-item label="连续工作天数：" style="margin-top: 35px;">
              <el-row>
                <span>上</span>
                <el-input v-model="sortForm.name" placeholder="请输入" class="inp">
                  <template #suffix>
                    天
                  </template>
                </el-input>
                <span>休</span>
                <el-input v-model="sortForm.name" placeholder="请输入" class="inp">
                  <template #suffix>
                    天
                  </template>
                </el-input>
              </el-row></el-form-item>

            <el-form-item label="工作时间:">
              <el-row type="flex"> <el-time-picker
                v-model="time"
                style="width: 100%;margin-left: 40px;"
                is-range
                align="right"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                :default-value="['09:00:00','18:00:00']"
              /> </el-row>

            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const cityOptions = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
export default {
  props: {
    visible: {
      type: Boolean,
      defaultL: false
    },
    id: {
      type: Number,
      default: NaN
    },
    type: {
      type: Number,
      default: NaN
    }

  },
  data() {
    return {
      activeName: 'first',
      sortForm: {

      },
      time: null,
      cities: cityOptions,
      checkedCities: '' // 绑定值
    }
  }, methods: {
    close() {
      this.$emit('update:visible', false)
    },
    handleClick() {}

  }
}
</script>

<style>
::v-deep .el-checkbox{
  margin: 0 5px 0 0;
}
::v-deep .el-range-editor, ::v-deep .el-date-editor--timerange{
  width: 100%;
}
.inp{
  width: 25% !important;
  margin-left: 25px;
  margin-right:25px;
}
</style>
